The Earth
Around the world in 0,5 seconds... - without plugins!
With this amazing HTML5 globe, you can travel around the world, in a matter of secondes. Show your points-of-interest with ease.
Spin it, Zoom it, Enjoy it :-)
Details
Give your visitors the freedom to easily browse through any point in the world, by spinning, clicking and zooming this beautiful interactive globe.
- Spin it with the mousebutton.
- Zoom in or out with the mousewheel.
- Click points-of-interest for lightbox with more info.
Popup your own html content or things like youTube videos, vimeo videos or actually any other site accepting being popped into an iframe (some sites are protected against this via "X-Frame-Options").
Highlight any point in the world, with this HTML5 component.
Options
+ 20 configurable options
This component have the following, easy to use, options:
- the size of the globe
- the shininess of the globes material
- texture to use for the globe
- minimum zoomlevel
- maximum zoomlevel
- the globes coarsness
- intensity for the ambient light
- color for the ambient light
- x position for the ambient light
- y position for the ambient light
- z position for the ambient light
- intensity for the main light
- color for the main light
- x position for the main light
- y position for the main light
- z position for the main light
- radius of the hotspots
- how far from the globes surface should the hotspot be offset
- texture for the hotspots
- should the hotspots maintain same size regardless of zoomlevel
- texture for the globes halo
- how far the halo extends from the globe
- default maxwidth for colorbox popup
- default maxheight for colorbox popup
compatability
This component uses Three.js for the 3d rendering, utilizing webGl.
"WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU)."
source: http://en.wikipedia.org/wiki/WebGL
Desktop Browser Implementation
- Mozilla Firefox - WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.[9] Mozilla Firefox 8.0 and newer versions use Cross-Origin Resource Sharing (CORS) to control all WebGL cross-domain textures.
- Google Chrome - WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 9. Google Chrome 13.0 and newer versions use Cross-Origin Resource Sharing (CORS) to control all WebGL cross-domain textures.
- Safari - Safari 5.1 and newer versions installed on Mac OS X Lion and Mac OS X Snow Leopard implemented support for WebGL, which is disabled by default.
- Opera - WebGL has been implemented in Opera 11 and 12 alpha (pre-release) snapshots.
- Internet Explorer - Microsoft has not announced any plans to support WebGL. The Chrome Frame and IEWebGL plugins provide options to add support for WebGL to Internet Explorer 6.0 and newer versions.
Credits
Thanks to the brilliant minds scattered around the internet, this project was made possible.
Thankyou :-)